{% extends "base.html" %}
{% block title %}日志报表{% endblock %}
{% block head %}
    <link rel="stylesheet" href="static/plugins/datepicker/datepicker3.css">
    <script src="static/plugins/datepicker/bootstrap-datepicker.js"></script>
    <script src="static/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
    <style>
        .box-body td {
            border: solid #add9c0;
            border-width: 0px 1px 1px 0px;
            padding: 5px 5px;
            text-align: center;
            font-size: smaller;
        }

        .box-body table {
            border: solid #add9c0;
            border-width: 1px 0px 0px 1px;
            background-color: #eee;
        }

        .box-body th {
            text-align: center;
        }
    </style>
{% endblock %}
{% block contentheader %}日志报表{% endblock %}
{% block contentsmallheader %}{% endblock %}
{% block content %}
    <div class="box box-primary ng-scope">
        <div class="box-header with-border">
            <div class="row">
                <div class="col-md-2">
                    <label style="height:30px; line-height:30px;">选择时间范围：</label>
                </div>
                <div class="col-md-3">
                    <div class="input-daterange input-group" id="datepicker" data-date-format="yyyy-mm-dd">
                        <input type="text" class="input-sm form-control" style="height:30px;" name="start"/>
                        <span class="input-group-addon">to</span>
                        <input type="text" class="input-sm form-control" style="height:30px;" name="end"/>
                    </div>
                </div>
                <div class="col-md-3">
                    <button id="submit" class="btn btn-primary" style="width: 100px;height: 30px">确定
                    </button>
                </div>
            </div>
        </div>
        <div class="box-body">
            <div class="col-md-12" id="tbl_detail">
                <div id="table_container" style="width: 100%">

                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block script %}
    <script>
        $("#datepicker").datepicker({
            language: 'zh-CN',
            autoclose: true,
            todayHighlight: true
        });
        var table_container = $('#table_container');
        var table_example = '<table id="example1" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info"></table>';
        $.ajax({
            url: "/get_data_report_log_report",
            success: function (data) {
                table_container.append(table_example);
                fill_tree(data);
            }
        });
        $("#submit").on('click', function () {
            var start = $('input[name="start"]').val();
            var end = $('input[name="end"]').val();
            if (start == "" || end == "")
                return;
            $.ajax({
                data: {'start': start, 'end': end},
                url: "/get_data_report_log_report",
                success: function (data) {
                    table_container.empty();
                    table_container.append(table_example);
                    fill_tree(data);
                }
            });
        });
        function fill_tree(data) {
            $('#example1').DataTable({
                data: data.data.dataset,
                destroy: true,
                columns: data.data.columns,
                columnDefs: [
                    {
                        "render": function (d, type, row, meta) {
                            if (d == "OK")
                                return '<font color="#0000FF">OK</font>';
                            else if (d == "ERROR")
                                return '<font color="#FF0000">Error</font>';
                            else if (d == "EXCEPTION")
                                return '<font color="#FF0000">EXCEPTION</font>';
                        },
                        "targets": 4
                    }]
            });
        }
    </script>
{% endblock %}